<template>
  <div class="quill-viewer-container">
    <el-button link type="primary" @click="handlePreview">查看内容</el-button>
    <teleport to="body">
      <el-dialog v-model="dialogVisible" destroy-on-close :title="title" width="800px" @close="handleClose">
        <div class="preview-content" v-html="modelValue"></div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="handleClose">关闭</el-button>
          </span>
        </template>
      </el-dialog>
    </teleport>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

interface Props {
  modelValue?: string
  title?: string
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: '',
  title: '内容查看',
})

// 状态变量
const dialogVisible = ref(false)

// 预览对话框
const handlePreview = () => {
  dialogVisible.value = true
}

// 关闭对话框
const handleClose = () => {
  dialogVisible.value = false
}
</script>

<style lang="scss" scoped>
.quill-viewer-container {
  .preview-content {
    padding: 15px;
    min-height: 100px;
    max-height: 500px;
    overflow-y: auto;
  }
}
</style>
